<template>
  <div class="header-flag">
    <div class="flag">
      <div
        class="search-music flag-item"
        :class="{ active: current == 0 }"
        @click="handleClick(0)"
      >
        <router-link to="/searchMusic">发现音乐</router-link>
      </div>
      <div
        class="my-music flag-item"
        :class="{ active: current == 1 }"
        @click="handleClick(1)"
      >
        <router-link to="/">我的音乐</router-link>
      </div>
      <div
        class="focus flag-item"
        :class="{ active: current == 2 }"
        @click="handleClick(2)"
      >
        <router-link to="/">关注</router-link>
      </div>
      <div
        class="mall flag-item"
        :class="{ active: current == 3 }"
        @click="handleClick(3)"
      >
        <router-link to="/"> 商城 </router-link>
      </div>
      <div
        class="download flag-item"
        :class="{ active: current == 4 }"
        @click="handleClick(4)"
      >
        <router-link to="/">下载客户端</router-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const current = ref(0)
    const handleClick = (index: number) => {
      current.value = index
    }
    return {
      current,
      handleClick
    }
  }
})
</script>

<style scoped lang="less">
.header-flag {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 70px;
}
.flag {
  height: 100%;
  width: 85%;
  padding: 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ccc;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;

  .flag-item {
    height: 120%;
    width: 70px;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.8);
  }

  .search-music a,
  .my-music a,
  .focus a,
  .mall a,
  .download a {
    text-decoration: none;
    color: #ccc;
    font-size: 14px;
    font-weight: lighter;
  }
}
.active {
  background-color: #000;
}
</style>
